<template>
    <header>
        <h2>千锋项目管理系统</h2>
        <div class="listinfo" v-if="userinfo">
            <p> <span style="color:#409EFF">{{userinfo.rolltype=="1"?'学生':'讲师'}}</span> / {{userinfo.username}} </p>
            <el-avatar  :size="40" src="http://47.104.209.44/base/img/2.jpg"></el-avatar>
            <el-button @click='signout' type="danger" icon="el-icon-milk-tea" circle></el-button>
        </div>
    </header>
</template>

<script>
export default {
    props:{
        userinfo:Object
    },
    methods:{
        signout(){
            this.$alert('你确定要退出登录吗...', '友情提示', {
                confirmButtonText: '确定',
                callback: action => {
                    console.log(action)
                    if(action=='confirm'){
                        sessionStorage.token = "";
                        localStorage.rolltype = "";
                        this.$router.push({
                            name:"login"
                        })
                    }
                }
            });
        }
    }
}
</script>


<style lang="scss" scoped>
header{
    width:100%;
    height:100%;
    background: #123456;
    padding:0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:#fff;
    h2{
        font-size:20px;
        color:#fff;
    }
    .listinfo{
         display: flex;
        justify-content: space-between;
        align-items: center;
        p{
            margin:0 20px;
        }
        .el-avatar{
            margin:0 20px;
            cursor: pointer;
        }
        .el-button{
             margin:0 20px;
        }
    }
}
</style>

